<template>
  <view class="query-flex">
    <view class="spacing">
      <view class="con-display border-bottom">
        <view class="flex-left">盘点表</view>
        <view class="flex-right">长沙盘点</view>
      </view>
      <view class="con-display border-bottom">
        <view class="flex-left">盘点人</view>
        <view class="flex-right">张瑶</view>
      </view>
      <view class="con-display border-bottom">
        <view class="flex-left">区域</view>
        <view class="flex-right">长沙</view>
      </view>
      <view class="con-display border-bottom">
        <view class="flex-left">部门</view>
        <view class="flex-right">全部</view>
      </view>
      <view class="con-display border-bottom">
        <view class="flex-left">需盘点总数</view>
        <view class="flex-right">5</view>
      </view>
    </view>

    <!-- 间隔槽 -->
    <u-gap height="20" bg-color="#edeaea"></u-gap>

    <!-- tab栏 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>

    <view
      v-for="(item, index) in dataList"
      :key="index"
      class="spacing border-bottom"
    >
      <u-row gutter="16" @click="details(item)">
        <u-col span="3">
          <u-image width="100rpx" height="100rpx" :src="item.img"></u-image>
        </u-col>
        <u-col span="7">
          <view>资产名称：酒精123</view>
        </u-col>
        <u-col span="2">
          <view class="color-blue">盘盈</view>
        </u-col>
      </u-row>
      <view>
        <view class="con-display">
          <view class="flex-left-custom">条形码</view>
          <view class="flex-right-custom">{{ item.model }}</view>
        </view>
        <view class="con-display">
          <view class="flex-left-custom">资产分类</view>
          <view class="flex-right-custom">{{ item.name }}</view>
        </view>
        <view class="con-display">
          <view class="flex-left-custom">SN</view>
          <view class="flex-right-custom">ASD12346464</view>
        </view>
        <view class="con-display">
          <view class="flex-left-custom">规格型号</view>
          <view class="flex-right-custom"></view>
        </view>
        <view class="con-display">
          <view class="flex-left-custom">金额</view>
          <view class="flex-right-custom">{{ item.money }}</view>
        </view>
        <view class="con-display">
          <view class="flex-left-custom">区域</view>
          <view class="flex-right-custom">{{ item.region }}</view>
        </view>
      </view>
    </view>

    <!-- 按钮 -->
    <view class="button-con">
      <view class="button-return">
        <view class="button">新增</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "待盘点",
        },
        {
          name: "已盘点",
          count: 5,
        },
      ],
      current: 1,
      keyword: "",
      checked: false,
      dataList: [
        {
          id: "1",
          img: "https://cdn.uviewui.com/uview/example/fade.jpg",
          model: "SCADP12345",
          name: "酒精",
          money: "5",
          region: "长沙",
        },
        {
          id: "2",
          img: "https://cdn.uviewui.com/uview/example/fade.jpg",
          model: "SCADP12346",
          name: "口罩",
          money: "2",
          region: "长沙",
        },
        {
          id: "3",
          img: "https://cdn.uviewui.com/uview/example/fade.jpg",
          model: "SCADP12347",
          name: "纱布",
          money: "2",
          region: "长沙",
        },
      ],
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.con-display {          
  display: flex;
  padding: 20rpx;

  .flex-left {
    flex: 1;
  }

  .flex-right {
    flex: 1;
    text-align: right;
  }

  .flex-left-custom {
    flex: 40%;
  }

  .flex-right-custom {
    flex: 60%;
  }
}

.color-blue {
  color: #007aff;
}

.spacing {
  padding: 20rpx;
}
</style>
